<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
    <link href="Content/jquery-ui-1.9.2.custom/css/jquery-ui-1.9.2.custom.css" rel="stylesheet"/>
    <script src="Content/jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
    <script src="Content/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>
	<script>
    $(document).ready(function(){
        $("#hide").click(function(){
            $("div").hide(1000);
        });
        $("#show").click(function(){
            $("div").show("fast");
        });
        $("#toggle").click(function () {
            $("div").toggle()
        });
        $("#slide").click(function () {
            $("div").slideUp("slow");
            $("div").slideDown("slow");
            $("div").slideToggle(2000);
        });
        $("#datepicker").datepicker({
            inline: true
        });
        $("#css").click(function () {
            $("h1").css({ "background-color": "yellow"}); 
        });
    });
	</script>
	
</head>
<body>

<h1>Welcome to jQuery UI!</h1>

<button id="hide">Hide</button>
<button id="show">Show</button>
<button id="toggle">Toggle</button>
<button id="slide">Slide</button>
<button id="css">css</button>

<!-- Datepicker -->
<h2 class="demoHeaders">Datepicker</h2>
<div id="datepicker"></div>


</body>
</html>
